﻿<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Focus a Corporate Category Flat Bootstrap Responsive website Template | Portfolio :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Focus Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Custom Theme files -->
    <link href="/Content/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="/Content/css/style.css" type="text/css" rel="stylesheet" media="all">
    <link href="/Content/css/font-awesome.css" rel="stylesheet">  <!-- font-awesome icons -->
    <link rel="stylesheet" href="/Content/css/swipebox.css">
    <!-- //Custom Theme files -->
    <!-- js -->
    <script src="/Content/js/jquery-2.2.3.min.js"></script>
    <!-- //js -->
    <!-- web-fonts -->
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700" rel="stylesheet">
    <!-- //web-fonts -->
</head>
<body>
    <!-- banner -->
    <div class="banner-w3layouts about-banner">
        <div class="banner-img1">
        </div>
        <!-- banner-info -->
        <div class="banner-agileinfo">
            <div class="container">
                <div class="w3header">
                    <!--header-->
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <h1><a href="index.html">Focus</a></h1>
                        </div>
                        <!-- navbar-header -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <form class="navbar-right w3ls-search" action="#" method="post">
                                <input type="search" name="Search" placeholder="Enter your text..." required="">
                                <button type="submit" class="btn btn-default" aria-label="Left Align">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About</a></li>
                                <li>
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="icons.html">Web Icons</a></li>
                                        <li><a href="codes.html">Short Codes</a></li>
                                    </ul>
                                </li>
                                <li><a href="portfolio.html" class="active">Portfolio</a></li>
                                <li><a href="contact.html">Contact Us</a></li>
                            </ul>
                            <div class="clearfix"> </div>
                        </div>
                    </nav>
                </div>
                <!-- //header -->
                <div class="banner-w3text">
                    <h2>Portfolio</h2>
                </div>
            </div>
            <!-- //banner-info -->
        </div>
    </div>
    <!-- //banner -->
    <!-- portfolio -->
    <div class="portfolio">
        <div class="container">
            <div class="agileits-title">
                <h3>Our Images</h3>
                <p>Mauris rutrum turpis eget tincidunt eleifend vestibulum condimentum mollis tellus eu magna laoreet.</p>
            </div>
            <div class="gallery_gds">
                <ul class="simplefilter">
                    <li class="active" data-filter="all">All</li>
                    <li data-filter="1">Category 1</li>
                    <li data-filter="2">Category 2</li>
                    <li data-filter="3">Category 3</li>
                </ul>
                <div class="filtr-container">
                    <div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
                        <div class="agileits-img">
                            <a href="/Content/images/g1.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                                <img class="img-responsive  " src="/Content/images/g1.jpg" alt="" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="2, 3" data-sort="Luminous night">
                        <div class="agileits-img">
                            <a href="/Content/images/g2.jpg" class="swipebox" title="Duis maximus tortor diam, ac lobortis justo rutrum quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non purus fermentum, eleifend velit non">
                                <img src="/Content/images/g2.jpg" alt="" class="img-responsive" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="City wonders">
                        <div class="agileits-img">
                            <a href="/Content/images/g3.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                                <img src="/Content/images/g3.jpg" alt="" class="img-responsive  " />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="3" data-sort="Industrial site">
                        <div class="agileits-img">
                            <a href="/Content/images/g4.jpg" class="swipebox" title="Praesent non purus fermentum, eleifend velit non Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis.">
                                <img src="/Content/images/g4.jpg" alt="" class="img-responsive " />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="3" data-sort="In production">
                        <div class="agileits-img">
                            <a href="/Content/images/g5.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                                <img src="/Content/images/g5.jpg" alt="" class="img-responsive  " />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="2" data-sort="Peaceful lake">
                        <div class="agileits-img">
                            <a href="/Content/images/g6.jpg" class="swipebox" title="Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                                <img src="/Content/images/g6.jpg" alt="" class="img-responsive  " />
                            </a>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
    </div>
    <!-- //portfolio -->
    <!-- footer start here -->
    <div class="agile-footer">
        <div class="container">
            <div class="footer-agileinfo">
                <div class="col-md-4 col-sm-6 footer-wthree-grid">
                    <h6><a href="/Content/index.html">Focus</a></h6>
                    <p>Aenean vitae metus sit amet purus sodales blandit. Nullam ut dolor eu urna viverra semper. Mauris est odio, laoreet laoreet sapien non, sollicitudin bibendum nulla.</p>
                </div>
                <div class="col-md-3 col-sm-6 footer-wthree-grid">
                    <h3>Navigation</h3>
                    <ul>
                        <li><a href="/Content/index.html">Home</a></li>
                        <li><a href="/Content/about.html">About</a></li>
                        <li><a href="/Content/portfolio.html">Portfolio</a></li>
                        <li><a href="/Content/contact.html">Contact</a></li>
                    </ul>
                </div>
                <div class="col-md-2 col-sm-6 footer-wthree-grid">
                    <h3>Archives</h3>
                    <ul>
                        <li><a href="single.html">Nov 2016</a></li>
                        <li><a href="single.html">Oct 2016</a></li>
                        <li><a href="single.html">Sept 2016</a></li>
                        <li><a href="single.html">Aug 2016</a></li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-6 footer-wthree-grid w3social">
                    <h3>Social Media</h3>
                    <ul>
                        <li><a href="#"><i class="fa fa-google-plus"></i> Google-plus</a></li>
                        <li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
                        <li><a href="#"><i class="fa fa-dribbble"></i> Dribbble</a></li>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!-- //footer end here -->
    <!-- copy rights start here -->
    <div class="copyw3-agile">
        <div class="container">
            <p>© 2017 Focus. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
        </div>
    </div>
    <!-- //copy right end here -->
    <script src="/Content/js/SmoothScroll.min.js"></script>
    <script src="/Content/js/jquery.filterizr.js"></script>
    <script src="/Content/js/controls.js"></script>
    <!-- Kick off Filterizr -->
    <script type="text/javascript">
        $(function () {
            //Initialize filterizr with default options
            $('.filtr-container').filterizr();
        });
    </script>
    <!-- swipe box js -->
    <script src="/Content/js/jquery.swipebox.min.js"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $(".swipebox").swipebox();
        });
    </script>
    <!-- //swipe box js -->
    <!-- start-smooth-scrolling -->
    <script type="text/javascript" src="/Content/js/move-top.js"></script>
    <script type="text/javascript" src="/Content/js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();

                $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
            });
        });
    </script>
    <!-- //end-smooth-scrolling -->
    <!-- smooth-scrolling-of-move-up -->
    <script type="text/javascript">
        $(document).ready(function () {
            /*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
			};
			*/

            $().UItoTop({ easingType: 'easeOutQuart' });

        });
    </script>
    <!-- //smooth-scrolling-of-move-up -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/Content/js/bootstrap.js"></script>
</body>
</html>